<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
import { ref, provide, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'App',
  setup() {
    const isDarkMode = ref(false)
    const route = useRoute()
    
    // 检测系统主题偏好
    const checkSystemThemePreference = () => {
      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
      if (prefersDarkScheme.matches) {
        isDarkMode.value = true
      }
      
      // 监听系统主题变化
      prefersDarkScheme.addEventListener('change', (e) => {
        if (!localStorage.getItem('userThemePreference')) {
          isDarkMode.value = e.matches
        }
      })
    }
    
    // 从本地存储加载主题设置
    const loadThemePreference = () => {
      const savedPreference = localStorage.getItem('userThemePreference')
      if (savedPreference) {
        isDarkMode.value = savedPreference === 'dark'
      } else {
        checkSystemThemePreference()
      }
    }
    
    // 切换主题
    const toggleDarkMode = () => {
      isDarkMode.value = !isDarkMode.value
      localStorage.setItem('userThemePreference', isDarkMode.value ? 'dark' : 'light')
    }
    
    // 应用主题到文档
    const applyTheme = () => {
      document.documentElement.setAttribute('data-theme', isDarkMode.value ? 'dark' : 'light')
    }
    
    // 监听主题变化并应用
    watch(isDarkMode, () => {
      applyTheme()
    })
    
    // 初始化
    onMounted(() => {
      loadThemePreference()
      applyTheme()
    })
    
    // 提供主题相关功能给子组件
    provide('isDarkMode', isDarkMode)
    provide('toggleDarkMode', toggleDarkMode)
    
    return {
      isDarkMode
    }
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 响应式适配 */
@media (max-width: 768px) {
  :root {
    --layout-sider-width: 100%;
    --layout-header-height: 56px;
  }
}
</style>
